<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>聊天对话框</title>
  <style type="text/css">
    * {
      font-size: 14px;
      padding: 0;
      margin: 0;
    }

    .main {
      position: relative;
      margin: 20px auto;
      border: 1px solid steelblue;
      width: 430px;
      height: 400px;
    }

    .msgInput {
      display: block;
      width: 406px;
      height: 60px;
      margin: 10px auto;
    }

    .sendbtn {
      position: absolute;
      width: 100px;
      height: 29px;
      bottom: 5px;
      right: 10px;
    }

    .content {
      list-style: none;
      width: 410px;
      height: 280px;
      margin: 5px auto;
      border: 1px dotted #d1d3d6;
      overflow-y: scroll;
    }

    .msgContent {
      width: auto;
      max-width: 250px;
      height: auto;
      word-break: break-all;
      margin: 5px;
      padding: 3px;
      border-radius: 5px;
    }

    .content .left {
      float: left;
      text-align: left;
      background-color: lightgrey;
    }

    .content .right {
      float: right;
      text-align: right;
      background-color: yellowgreen;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      //		li.scrollIntoView();//将元素滚动到可见位置
    };
  </script>
</head>

<body>
  <div id="main" class="main">
    <ul id="content" class="content">
      <li class="msgContent left">hello?</li>
      <div style="clear: both"></div>
      <li class="msgContent left">hello</li>
      <div style="clear: both"></div>
      <li class="msgContent right">hi</li>
      <div style="clear: both"></div>
      <li class="msgContent left">hehe</li>
      <div style="clear: both"></div>
      <li class="msgContent left">goodbye</li>
      <div style="clear: both"></div>
      <li class="msgContent right">。。。。</li>
      <div style="clear: both"></div>
      <li class="msgContent right">
        sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd
        fasdfasdfasdf
      </li>
      <div style="clear: both"></div>

      <li class="msgContent right">aaa</li>
      <div style="clear: both"></div>
    </ul>
    <textarea id="msg_input" class="msgInput"></textarea>
    <button id="sendbtn" class="sendbtn">发送</button>
  </div>

  <script>
    /* 
    1- 找到元素
    2- 给btn添加点击事件，
    3- 点击的时候获取输入框的值，
    根据值创建 li和div 添加到ul里面
   */
    //  1- 找到元素
    // 
    var sendBtn = document.querySelector('#sendbtn')
    var msg_input = document.querySelector('#msg_input')
    var contentUl = document.querySelector('#content')

    // 2- 给btn添加点击事件，
    sendBtn.addEventListener('click', function () {
      // 3- 点击的时候获取输入框的值，
      var msg = msg_input.value;
      // 4-根据值创建 li和div 添加到ul里面

      var liStr = `
          <li class="msgContent right">${msg}</li>
           <div style="clear: both"></div>`;
      contentUl.innerHTML += liStr

      // 清除输入框
      msg_input.value = ''

      // 滚动条 往下
      // document.documentElement.scrollTop-->HTML

      // 滚动到一个很大的值
      contentUl.scrollTop = contentUl.scrollHeight


      // 滚动-高度
      console.log(contentUl.scrollHeight);

      // 元素 滚动到可视区域

      // ul中最后一个元素 滚动到可视为止
      // contentUl.lastElementChild.scrollIntoView()
      // contentUl.lastElementChild.scrollIntoView({behavior:"auto"})
      // contentUl.lastElementChild.scrollIntoView({ behavior: "smooth" })
      // contentUl.lastElementChild.scrollIntoView({ behavior: "smooth" })

      //  block: "end"  最底部
      //  block: "start"  最底部
      //  block: "center"  中间
      // contentUl.lastElementChild.scrollIntoView({ behavior: "smooth", block: "end" })
      contentUl.lastElementChild.scrollIntoView({ behavior: "smooth", block: "center" })




    })



  </script>
</body>

</html>